<!-- @format -->

<script setup>
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})
</script>

<template>
	<table class="my-table">
		<thead>
			<tr>
				<!-- 表头不确定：用插槽占位 -->
				<slot name="thead"></slot>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item, index) in props.data">
				<!-- 因为表头不确定了，所以表体的结构也不确定了，也用插槽占位 -->
				<slot
					:row="item"
					:i="index"></slot>
			</tr>
		</tbody>
	</table>
</template>

<style lang="scss">
	.my-table {
		width: 100%;
		border-spacing: 0;
		img {
			width: 100px;
			height: 100px;
			object-fit: contain;
			vertical-align: middle;
		}
		th {
			background: #f5f5f5;
			border-bottom: 2px solid #069;
		}
		td {
			border-bottom: 1px dashed #ccc;
		}
		td,
		th {
			text-align: center;
			padding: 10px;
			transition: all 0.5s;
			&.red {
				color: red;
			}
		}
		.none {
			height: 100px;
			line-height: 100px;
			color: #999;
		}
	}
</style>
